<template>
    <view class="content">
        <van-nav-bar :title="scrolling ? navBarTitle : ''" left-arrow @click-left="onClickLeft"> </van-nav-bar>

        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">
            <loading :loadingIsShow="loadingIsShow" v-if="!isrefresher"></loading>
            <view v-show="!loadingIsShow">
                <view class="moneyBg">
                    <view class="text">{{ navBarTitle }}</view>
                </view>
                <view class="goodsDetail">
                    <view class="" style="width: 100%;">
                        <view class="wraper_top" v-for="(item, index) in productInfoList" :key="index">
                            <view class="goodsPic">
                                <!-- <img :src="item.imgUrl" alt="" style="width: 93px;height: 93px;"> -->
                                <img class="img" :src="item.imgUrl" mode="widthFix" />
                            </view>
                            <view class="goodsText">
                                <view class="goodsText_top">
                                    <view class="goodsTop">
                                        <view class="goods_T">{{ item.productName }}</view>
                                        <view class="goods_price">￥{{ item.productPrice }}</view>
                                    </view>
                                    <view class="goodsMiddle">
                                        <view class="goods_specs">{{ item.specName }}</view>
                                        <view class="goods_num">X {{ item.buyNum }}</view>
                                    </view>
                                </view>
                                <view class="goodsBottom"> 退款:  <span  v-if="refundAmount">￥{{ refundAmount }} </span> <span v-if="refundPoints"><img
                                    src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/jinbi.png"
                                    alt="" style="height: 10px; width: 10px;margin-right: 6px;margin-left: 19px" />{{ refundPoints
                                }}</span> </view>
                            </view>
                        </view>
                    </view>

                    <view class="wraper_bottom" hover-class="none" hover-stop-propagation="false">
                        <view class="wraper_bottom_reason wraper_bottom_box ">
                            <view class="bottom_title">退款原因</view>
                            <view class="describe">选择退款原因</view>
                            <!-- <view class="" style="display: flex; justify-content: space-between;" @click="selectReason">
                                <view class="reason">{{refundReason}}</view>
                                <van-icon name="arrow" />
                            </view> -->
                            <van-field :value="refundReason" placeholder="请选择取消原因" disabled is-link
                            @click.native="selectReason" />
                        </view>
                        <view class="wraper_bottom_money wraper_bottom_box  t32 ">
                            <view class="bottom_title">退款金额</view>
                            <view class="describe">根据商品付款金额或积分退款</view>
                            <view class="reason"> <span  v-if="refundAmount">￥{{ refundAmount }} </span> <span v-if="refundPoints"><img
                                    src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/jinbi_gray1127.png"
                                    alt="" style="height: 10px; width: 10px;margin-right: 6px;margin-left: 19px" />{{ refundPoints
                                }}</span> </view>
                        </view>
                        <view class="wraper_bottom_reason wraper_bottom_box  t32" v-if="navBarTitle ==='申请退货退款'">
                            <view class="bottom_title">退货方式</view>
                            <view class="describe">请送达自提点进行退货</view>
                            <view class="reason">{{ selfPickInfo }}</view>
                        </view>
                        <view class="wraper_bottom_describe wraper_bottom_box  t32">
                            <view class="bottom_title">问题描述<span v-if="refundReason.includes('其他')">（必填）</span></view>
                            <view class="reason">
                                <textarea placeholder="请仔细说明退款原因" placeholder-style="font-size: 12px;color: #888888;"
                                    :disable-default-padding="true" :value="message" @input="input" auto-focus="true"
                                    confirm-type="done" maxlength="200" autoHeight
                                    custom-style="font-size: 12px;line-height:1.5; color:#111111;" auto-height
                                    @keyboardheightchange="getKeyBoardHeight"></textarea>
                            </view>
                        </view>
                        <view class="t32">

                            <!-- <van-uploader :file-list="fileList" :deletable="true" max-count="6" @after-read="afterRead"
                                @delete="deletedFile" @before-read="beforeRead" accept="image/*" :preview-image="true"
                                multiple :show-upload="true" :capture="['album', 'camera']" :max-duration="60"
                                upload-text="点击上传图片（最多六张）">
                            </van-uploader>
                            <view class="preview-area" v-if="fileList.length > 0">
                                <view class="preview-title">已上传凭证：</view>
                                <view class="preview-list">
                                    <image v-for="(file, index) in fileList" :key="index" :src="file.url" mode="aspectFill"
                                        class="preview-image" @click="previewImage(index)">
                                    </image>
                                </view>
                            </view> -->
                            <view class="custom-uploader">
                                <!-- 图片预览列表 -->
                                <view class="preview-list">
                                    <view v-for="(item, index) in fileList" :key="index" class="preview-item">
                                        <image :src="item.url" class="preview-image" @click="previewImage(item.url,index)"></image>
                                        <view class="delete-icon" @click="deleteImage(index)">×</view>
                                    </view>
                                </view>
                                <!-- 上传按钮 -->
                                <view class="upload-btn" @click="chooseImage">
                                    <image class="upload-icon" src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/uploaderPic.png" mode="aspectFit"></image>
                                    <text class="upload-text">点击上传图片（最多六张）</text>
                                </view>
                            </view>
                        </view>
                    </view>

                </view>
            </view>
        </scroll-view>
        <view class="bottom">
            <!-- <button plain type="waring" class="checkBtn" @click="submitReturnRequest">提交申请</button> -->
            <van-button type="primary"  class="button" @click="submitReturnRequest" :disabled="isSubmitting" :loading="isSubmitting"
            :class="{ 'disabled-btn': isSubmitting }">提交申请</van-button>
        </view>
        <reasonPopup :show="showPopup" @closePopup="closePopup"  @next="next" :selectedReason="refundReason"></reasonPopup>
    </view>
</template>

<script>
import CryptoJS from 'crypto-js'; // 确保已正确导入 CryptoJS
import reasonPopup from '@/mycomponents/shangcheng/reasonPopup.vue'
import {createAfterSalesOrderApi,getAfterSalesOrderApi} from '@/api/order'
import loading from '@/mycomponents/loading.vue'

const OSS_CONFIG = {
    region: 'oss-cn-beijing',
    host: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/',
    accessId: 'LTAI5t977yzTgy3KuHsZpNGp',
    accessKeySecret: '3XClQa1PDAqqHyK1avhz5npkhN7Uel',
    bucket: '17lelife-bucket',
    policy: undefined,
    signature: undefined,
    dir: 'WeChat-App-Picture/afterSales/images/',
    expireTime: 3600 // 1小时过期
};
export default {
    components: {
        reasonPopup,
        loading
    },
    data () {
        return {
            isrefresher: false,
            loadingIsShow: true,
            loadingIsShowPage: true,
            navBarTitle: '申请退款',
            scrolling: false,
            refundMoney: '52',
            date: '2024-10-12 18:20',
            refundAmount: '0',
            refundPoints: '0', // 退回积分
            refundCoupon: 1, // 退回优惠券数量
            refundReason: '请选择原因', // 退款原因 中文名称
            selectedReasonType: '', // 选中的原因类型 英文名称
            message: '', // 问题描述
            applyDate: 'apply', // 申请时间
            refundCode: '3466777777888',
            productInfoList:[],

            params: undefined, // 接受从路由传过来的参数
            fileList: [], // 图片列表
            showPopup: false,
           
            money: '120',
            score: '56',
            selfPickInfo: '滨湖一号门面房3号',
            orderId: '', // 订单ID
            orderDetailIdList: [], // 订单详情ID列表
            sourceType:'',
            REASON_MAPPING :{
                'INGREDIENTS_NOT_MATCH_DESCRIPTION': '成分与描述不符',
                'CONSENSUS_REFUND': '协商一致退款',
                'WRONG_GOODS': '发错货物',
                'QUALITY_PROBLEM': '质量问题',
                'MISSING_ITEMS': '少件',
                'OTHER': '其他'
            },
            isSubmiting: false, // 控制提交状态
            afterSalesType: null, // 售后类型
        }
    },
    onLoad (data) {
        if (data && data.params) {
            this.params = JSON.parse(decodeURIComponent(data.params))
            console.log(this.params)
            this.afterSalesType = this.params?.afterSalesType || null
            if (this.params.title === '退款' || this.params.afterSalesType == 2 || this.params.afterSalesType == 4) {
                this.navBarTitle = '申请退款'
            } else {
                this.navBarTitle = '申请退货退款'
            }
            this.sourceType = this.params.sourceType || undefined
            this.orderId = this.params.orderId
            this.orderDetailIdList = this.params.orderDetailIdList
            this.loadAfterSalesData()
        }
    },
    onReady () {

    },
    onShow(){
        // this.loadAfterSalesData()
    },
    methods: {
        // 滑动
        scrollPage (e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {
            const pageParams = {
                sourceType: this.sourceType,
                orderId: this.orderId,
            }
            // 根据来源类型跳转不同页面
            switch(this.sourceType) {
                // case 'judgeOrderDetail':
                //     uni.redirectTo({
                //         url: '/pages/orders/refundOrderDetail?params=' + encodeURIComponent(JSON.stringify(pageParams))
                //     });
                //     break;
                // case 'orderService':
                //     // uni.navigateBack({ 
                //     //     delta: 2 // 返回两级页面到订单详情
                //     // });
                //     uni.redirectTo({
                //         url: '/pages/orders/refundOrderDetail?params=' + encodeURIComponent(JSON.stringify(pageParams))
                //     });
                //     break;
                // case 'orderList':
                //     uni.switchTab({
                //         url: '/pages/order/order'
                //     });
                //     break;
                default:
                    uni.navigateBack();
            }
        },
        // 新增数据加载方法
        async loadAfterSalesData() {
            if (!this.isrefresher) {
                this.loadingIsShow = true
            }
            try {
                 // 添加加载状态
                uni.showLoading({ title: '加载中...' })
                const res = await getAfterSalesOrderApi({
                    orderId: this.orderId,
                    orderDetailIdList: this.orderDetailIdList
                })
                if (res.code === 200) {
                    // 处理接口返回数据并添加status字段
                    this.productInfoList = res.data.productInfoList.map(item => ({
                        ...item,
                        status: false
                    }))
                    this.refundAmount = res.data?.amount || 0
                    this.refundPoints = res.data?.points || 0
                    this.selfPickInfo = res.data?.selfPickInfo || ''
                }
            } catch (error) {
                console.error('获取售后数据失败:', error)
            } finally {
                uni.hideLoading()
                this.loadingIsShow = false
                this.loadingIsShowPage = false
                // 关闭加载状态 (转动的圈)，需要一点延时才能关闭
                this.time = setTimeout(e => {
                    this.isrefresher = false
                }, 200)
            }
            
        },
        // 退款
        selectReason () {
            this.showPopup = true
        },
        // 关闭弹窗
        closePopup () {
            this.showPopup = false
        },
        input (e) {
            console.log(e.detail)
            this.message = e.detail.value
        },
        // handleReasonSelect(reason) {
        //     this.refundReason = reason
        // },
        beforeRead(file) {
            console.log(file)
            const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
            if (!allowedTypes.includes(file.type)) {
                uni.showToast({
                    title: '只允许上传 JPEG、PNG、GIF 格式的图片',
                    icon: 'none'
                });
                return false;
            }
            if (file.size > 5 * 1024 * 1024) {
                uni.showToast({
                    title: '图片大小不能超过 5MB',
                    icon: 'none'
                });
                return false;
            }
            return true;
        },
        
        async chooseImage() {
            try {
                const res = await uni.chooseImage({
                    count: 6 - this.fileList.length,
                    sizeType: ['compressed'],
                    sourceType: ['album', 'camera'],
                    success: (res) => {
                        res.tempFiles.forEach(async (file) => {
                            try {
                                uni.showLoading({ title: '上传中...' });
                                const ossUrl = await this.uploadToOSS(file);
                                this.fileList = [...this.fileList, {
                                    url: ossUrl,
                                    status: 'done',
                                    isImage: true
                                }];
                                console.log('上传完成，更新后文件列表:', JSON.stringify(this.fileList))
                            } catch (error) {
                                console.error('上传失败:', error);
                            } finally {
                                uni.hideLoading();
                            }
                        });
                    }
                });
            } catch (error) {
                uni.showToast({
                    title: error.errMsg || '选择图片失败',
                    icon: 'none'
                });
            }
        },

    // 新增删除方法
    deleteImage(index) {
        uni.showModal({
            title: '提示',
            content: '确定删除该图片吗？',
            success: (res) => {
                if (res.confirm) {
                    this.fileList.splice(index, 1);
                    this.fileList = [...this.fileList];
                }
            }
        });
    },

        // OSS配置（请替换为您实际的配置）
        getOSSConfig() {
            return {
                accessId: 'your_access_id',
                accessKey: 'your_access_key',
                host: 'https://your-bucket.oss-cn-hangzhou.aliyuncs.com/',
                dir: 'your_upload_dir/'
            }
        },

        async uploadToOSS(file) {
            const OSS_CONFIG = {
                region: 'oss-cn-beijing',
                accessKeyId: 'LTAI5t977yzTgy3KuHsZpNGp',
                accessKeySecret: '3XClQa1PDAqqHyK1avhz5npkhN7Uel',
                bucket: '17lelife-bucket',
                host: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/',
                dir: 'WeChat-App-Picture/afterSales/images/'
            };

            try {
                // 强化文件路径校验
                const fileRealPath = file.tempFilePath || file.path || file.url;
                if (!fileRealPath) {
                    throw new Error('无法获取有效文件路径，请重新选择文件');
                }

                // 安全获取文件扩展名
                const getExtension = () => {
                    return file.type?.split('/')[1] ||
                        file.name?.split('.').pop() ||
                        fileRealPath.split('.').pop() ||
                        'jpg';
                };

                // 生成唯一文件名
                const fileName = `${Date.now()}_${Math.random()
                    .toString(36)
                    .substr(2, 12)}.${getExtension().toLowerCase()}`;
                const filePath = `${OSS_CONFIG.dir}${fileName}`;

                // 生成安全策略
                const generatePolicy = () => {
                    const policy = {
                        expiration: new Date(Date.now() + 3600000).toISOString(),
                        conditions: [
                            ["content-length-range", 0, 10485760], // 10MB限制
                            ["starts-with", "$key", OSS_CONFIG.dir]
                        ]
                    };
                    return CryptoJS.enc.Base64.stringify(
                        CryptoJS.enc.Utf8.parse(JSON.stringify(policy))
                    );
                };

                // 生成签名
                const policy = generatePolicy();
                const signature = CryptoJS.HmacSHA1(policy, OSS_CONFIG.accessKeySecret)
                    .toString(CryptoJS.enc.Base64);

                // 执行上传
                const uploadResult = await new Promise((resolve, reject) => {
                    uni.uploadFile({
                        url: OSS_CONFIG.host,
                        filePath: fileRealPath,
                        name: 'file',
                        formData: {
                            key: filePath,
                            policy: policy,
                            OSSAccessKeyId: OSS_CONFIG.accessKeyId,
                            signature: signature,
                            success_action_status: '200'
                        },
                        success: (res) => {
                            if (res.statusCode === 200) {
                                resolve(`${OSS_CONFIG.host}${filePath}`);
                            } else {
                                reject(new Error(`上传失败，状态码：${res.statusCode}`));
                            }
                        },
                        fail: (err) => {
                            reject(new Error(`上传请求失败：${err.errMsg}`));
                        }
                    });
                });

                return uploadResult;
            } catch (error) {
                console.error('OSS上传失败详情:', {
                    error,
                    fileObject: file,
                    pathAttempts: {
                        tempFilePath: file.tempFilePath,
                        path: file.path,
                        url: file.url
                    }
                });
                throw new Error(`文件上传失败：${error.message}`);
            }
        },

        previewImage(currentUrl,index) {
            console.log('预览图片:', currentUrl)
            // uni.previewImage({
            //     current: index,
            //     urls: this.fileList.map(file => file.url)
            // })
            uni.previewImage({
                current: currentUrl,
                urls: this.serviceDesc.imageList.map(file => file.url),
                fail: (err) => {
                    console.error('预览失败:', err);
                }
            });
        },
        // 完善图片删除
        deletedFile(event) {
            const { index } = event.detail
            this.fileList.splice(index, 1)
            this.fileList = [...this.fileList]
        },
        // 提交申请
        async submitReturnRequest(){
            // 若正在提交，直接返回
            if (this.isSubmiting) {
                return;
            }
            // 标记为正在提交
            this.isSubmiting = true;
            try {
                console.log(this.fileList,'fileList', JSON.stringify(this.fileList))
                const imgs = this.fileList.map(file => file.url).filter(url => url !== undefined)
                const ss = this.fileList
                    .filter(file => !!file.url)  // 新增过滤逻辑
                    .map(file => file.url)
                console.log(imgs, 'imgs', ss)
                 // 表单验证
                if (!this.message.trim() && this.selectedReasonType == 'OTHER') {
                    return uni.showToast({ title: '请填写问题描述', icon: 'none' })
                }
                if (!this.refundReason ||  this.refundReason == '请选择原因') {
                    return uni.showToast({ title: '请选择退款原因', icon: 'none' })
                }
                if (this.fileList.length === 0) {
                    console.warn('文件列表为空')
                }
                // 检查是否有未上传完成的图片
                if (this.fileList.some(file => !file.url.startsWith('http'))) {
                    return uni.showToast({ title: '请等待图片上传完成', icon: 'none' })
                }
                // uni.showLoading({ title: '正在提交...' })
              
                console.log(this.fileList,'fileList')
                // 组装请求参数
                const params = {
                    orderId: this.params.orderId, // 假设从路由参数获取订单ID
                    orderDetailIdList: this.orderDetailIdList,
                    // afterSalesType:this.afterSalesType? 4 :( this.afterSalesType == '申请退款' ? 2 : 1), // 根据标题判断类型
                    afterSalesType:this.afterSalesType, // 判断售后类型
                    refundReasonType: this.selectedReasonType, //退货类型
                    problemDescription: this.message, // 问题描述
                    imageList:ss,     // 图片列表
                    // refundAmount: this.money,
                    // refundPoints: this.score,
                    // addressId:1 //假设地址ID为1
                }

                console.log(params)
                // 显示加载状态
                uni.showLoading({ title: '提交申请中...' })
                const res = await createAfterSalesOrderApi(params)

                if (res.code === 200) {
                    const afterSalesId =  res.data //174687511417851904
                    // const afterSalesType = this.afterSalesType? this.afterSalesType :(this.navBarTitle == '申请退款' ? 2 : 1 ) // 根据标题判断类型
                    const afterSalesType = this.afterSalesType  // 根据标题判断类型

                    uni.showToast({ title: '提交成功' })
                    // 成功后再跳转
                    if(this.sourceType == 'await'){
                        uni.navigateTo({
                            url: `/pages/orders/refundOrderDetail?params=${encodeURIComponent(JSON.stringify({ isApply: true,afterSalesId:afterSalesId,afterSalesType:afterSalesType,orderId:this.orderId,sourceType:this.sourceType }))}`
                        })
                    }else if(this.sourceType == 'judgeOrderDetail' || this.sourceType == 'orderDetails'){
                        uni.navigateTo({
                            url: `/pages/orders/refundOrderDetail?params=${encodeURIComponent(JSON.stringify({ isApply: true,afterSalesId:afterSalesId,afterSalesType:afterSalesType,orderId:this.orderId,sourceType:this.sourceType }))}`
                        })
                    }else if(this.sourceType == 'orderService'){
                        uni.navigateTo({
                            url: `/pages/orders/refundOrderDetail?params=${encodeURIComponent(JSON.stringify({ isApply: true,afterSalesId:afterSalesId,afterSalesType:afterSalesType,orderId:this.orderId,sourceType:this.sourceType }))}`
                        })
                    }
   
                } else {
                    uni.showToast({ title: res.msg || '提交失败', icon: 'none' })
                }
            } catch (error) {
                uni.showToast({ title: error.message || '提交失败', icon: 'none' })
            } finally {
                uni.hideLoading()
                this.tempFiles = [] // 清空临时文件
                this.isSubmiting = false;
            }
        },
     
        // 提取获取文件路径的函数
        getFilePath(file) {
            return file.path || file.url || file.tempFilePath ||
                file.tempFilePaths?.[0] || file.file?.path;
        },

        // 原因选择弹窗中的下一步 即返回该页面 并显示已经选择的弹窗
        next(selectedReasonType){
            console.log(selectedReasonType,'selectedReasonType')
            this.selectedReasonType = selectedReasonType  // 保存选择的退款原因 后端接口需要的
            this.refundReason = this.REASON_MAPPING[selectedReasonType] // 显示在页面上的文字
            console.log(this.refundReason,'refundReason',this.selectedReasonType)
        }

    }
}
</script>

<style scoped>
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
}

.scroll-content {
    flex: 1;
    height: 1px;
}

.moneyBg {
    margin-top: 17px;
    margin-left: 24px;
    margin-right: 24px;
    display: flex;
    align-items: center;
}

.text {
    font-size: 30px;
    text-align: center;
    color: #111111;
    line-height: 30px;
}

.money {
    font-size: 20px;
    color: #111111;
    text-align: center;
    line-height: 20px;
    margin-left: 19px;
}

.date {
    margin-top: 36px;
    padding: 0px 24px;
}

.refundDetail {
    padding: 42px 24px 24px 24px;
}

.box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #111111;
    font-size: 14px;
    line-height: 14px;
}

.refundText {
    color: #111111;
    font-size: 14px;
    line-height: 14px;
}

.refundR {
    color: #888888;
}

/* dingdan编号 */
.refundCode {
    display: flex;
    align-items: center;
}

/* 复制两个字体 */
.copy {
    font-size: 12px;
    text-align: right;
    color: #111111;
    line-height: 12px;
}

.goodsDetail {
    margin-top: 25px;
    padding: 0px 24px 24px 24px;
    /* display: flex;
    justify-content: space-between; */
    width: calc(100% - 48px);
    padding-bottom:calc(144rpx + env(safe-area-inset-bottom));
}

.wraper_top {
    display: flex;
    margin-bottom: 11px;
    width: 100%;
}
.wraper_top :last-child{
    margin-bottom: 0px;
}

/* .wraper_right {-
    float: right;
} */

.goodsPic {
    /* width: 28%; */
    width: 186rpx;
    height: 186rpx;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.goodsPic img {
    /* width: 100%;
    height: auto; */
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 关键：裁剪图片而不是压缩 */
    object-position: center center; /* 可以调整为 top, bottom 等 */
}

.goods_tips {
    margin-top: 6px;
    font-size: 11px;
    text-align: left;
    color: #888888;
    line-height: 11px;
}

.goodsText {
    position: relative;
    /* width: 67%; */
    width: calc(100% - 214rpx);
    margin-left: 28rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 5px;
    padding-bottom: 6px;
    text-align: left;
}
.goodsText_top{
    display: flex;
    flex-direction: column;
}

.goodsTop {

    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.goods_T {
    max-width: 80%;
    font-size: 28rpx;
    text-align: left;
    color: #111111;
    line-height: 28rpx;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 显示省略号 */
}

/* // 商品价格 */
.goods_price {
    font-size: 28rpx;
    color: #737373;
    line-height: 28rpx;
}

.goodsMiddle {

    margin-top: 20rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.goods_specs {
    max-width: 80%;
    font-size: 22rpx;
    text-align: left;
    color: #666666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.goods_num {
    font-size: 22rpx;
    line-height: 22rpx;
    color: #666666;
}

.goodsBottom {

    /* margin-top: 36rpx; */
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    font-size: 28rpx;
    color: #111111;
}

.wraper_bottom {
    margin-top: 30px;
    margin-bottom: 30px;
    /* background: palegoldenrod; */
}

.wraper_bottom_box {
    border-bottom: 1px solid #000000;
}

.bottom_title {
    font-size: 20px;
    color: #111111;
    line-height: 20px;
}

.describe {
    font-size: 12px;
    color: #666666;
    line-height: 12px;
    margin-top: 20px;
}

.reason {
    font-size: 14px;
    color: #666666;
    padding-top: 20px;
    padding-bottom: 13px;
}

::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}

::v-deep .van-cell {
    padding-left: 0px !important;
    border-bottom: 1px solid #f9f9f9;
}

.btn-area {
    position: fixed;
    bottom: 0;
    width: calc(100% - 48px);
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
    display: flex;
    background: #ffffff;
    z-index: 100;
    height: 144rpx;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-top: 1px solid #f9f9f9;
}


.checkBtn {
    background-color: #FF6203;
    border: none;
    border-radius: 38rpx;
    font-size: 28rpx;
    text-align: center;
    color: #FFFFFF;
    height: 86rpx;
    line-height:86rpx;
    width: 100%;
}
.preview-area {
    margin-top: 20px;
    padding: 15px;
    background-color: #f8f8f8;
    border-radius: 8px;
}

.preview-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* .preview-image {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    background-color: #fff;
} */

.custom-uploader {
    /* padding: 15px; */
}

.upload-btn {
    width: 174rpx;
    height: 174rpx;
    border: 1px dashed #ddd;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    background-color: #f0f0f0;
}

.upload-icon {
    width: 40rpx;
    height: 34rpx;
}

.upload-text {
    font-size: 24rpx;
    color: #888888;
    margin-top: 8px;
    text-align: center;
}

.preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.preview-item {
    position: relative;
    width: 174rpx;
    height:174rpx;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20rpx;
}

.preview-image {
    width: 100%;
    height: 100%;
}

.delete-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    background: rgba(0,0,0,0.5);
    color: white;
    text-align: center;
    line-height: 24px;
    border-radius: 0 0 0 8px;
}
button {
    border: none;
}

button[plain]{
    border: none;
}

.t16 {
    margin-top: 16px;
}

.t21 {
    margin-top: 21px;
}

.t32 {
    margin-top: 32px;
}

::v-deep .van-uploader__upload-text {
    text-align: center !important;
}
::v-deep .van-uploader__preview-image {
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 让图片填满容器 */
}

::v-deep .van-uploader__file {
    background-color: transparent !important;
}
::v-deep .van-field__control--disabled {
    color: #666666 !important;
}
::v-deep .van-button--primary {
    width: 100%;
    height: 86rpx;
    border-radius: 38rpx;
    font-size: 28rpx;
    background: #FF6203 !important;
    border: 1px solid #ff6203 !important;
}
.disabled-btn {
    border-color: #cccccc !important;
}
</style>
